<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>光山县旅游产业监控中心</title>
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <link rel="stylesheet" href="./assets/css/public.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/tongji_ykhx.css">
    <style>
        table{
            width: 100%;
            line-height: 45px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="box">
    <!--头部-->
    <div class="title-box">
        <div class="title-img">
            <h3>光山县旅游产业监控中心</h3>
        </div>
        <ul class="link-box">
            <li><a href="index.html">人流热力图</a></li>
            <li class="active"><a href="chanye_jq.html">行业运行监测</a></li>
            <li><a href="industryDevelopment.html">行业发展监测</a></li>
            <li><a href="video.html">第三方数据</a></li>
        </ul>
        <div class="title-left">
            <span>光山县</span>
            <span id="weather">小雨转晴</span>
            <span id="temperature">32/23℃</span>
            <span id="windPower">东风</span>
        </div>
    </div>
    <!--主体-->
    <div class="main-box">
        <!--导航-->
        <div class="nav-box">
            <ul>
                <li>
                    <a href="index.html">
                        <div>
                            <img src="./assets/images/icon-index.png">
                            <img src="./assets/images/icon-index-active.png">
                        </div>
                        <p>大数据人流热力图</p>
                    </a>
                </li>
                <li class="active">
                    <a href="./chanye_jq.html">
                        <div>
                            <img src="./assets/images/icon-analysis.png">
                            <img src="./assets/images/icon-analysis-active.png">
                        </div>
                        <p>行业运行监测及统计</p>
                    </a>
                </li>
                <li>
                    <a href="./tongji.html">
                        <div>
                            <img src="./assets/images/icon-operation.png">
                            <img src="./assets/images/icon-operation-active.png">
                        </div>
                        <p>行业发展监测及统计</p>
                    </a>
                </li>
                <li>
                    <a href="./lvyoujia_qx.html">
                        <div>
                            <img src="./assets/images/icon-activity.png">
                            <img src="./assets/images/icon-activity-active.png">
                        </div>
                        <p>第三方数据处理和呈现</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--数据内容-->
        <div class="content-box flex-column">
            <div class="content-nav">
                <ul>
                    <li class="active">
                        <a href="#"> 运营报表分析</a>
                    </li>
                </ul>
                <div class="radio-box">
                    <input type="radio" id="tody" name="time" checked>
                    <label for="tody">今日</label>
                    <input type="radio" id="month" name="time">
                    <label for="month">本月</label>
                    <input type="text" id="period" placeholder="选择时间段">
                    <button>查询</button>
                </div>
            </div>
            <div class="bg-1 mgb-16" style="height: 600px;">
                <div class="content-title">运营数据分析</div>
                <div class="bg-main-1" id="index_1"></div>
            </div>
            <div class="bg-1 mgb-16">
                <div class="content-title">
                    旅游消费报表
                    <button>导出</button>
                </div>
                <div class="bg-main-1" class="content-main ">
                    <table border="1">
                        <thead>
                        <tr>
                            <th>消费项目</th>
                            <th>企业名称</th>
                            <th>交易数量</th>
                            <th>交易金额(元)</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>门票</td>
                            <td>大苏山国家森林公园</td>
                            <td>2567</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>住宿</td>
                            <td>如家酒店</td>
                            <td>345</td>
                            <td>34500</td>
                        </tr>
                        <tr>
                            <td>住宿</td>
                            <td>如家酒店</td>
                            <td>345</td>
                            <td>34500</td>
                        </tr>
                        <tr>
                            <td>餐饮</td>
                            <td>川香美食</td>
                            <td>5678</td>
                            <td>2345673</td>
                        </tr>
                        <tr>
                            <td> 景区小交通</td>
                            <td>大苏山国家森林公园</td>
                            <td>5454</td>
                            <td>3333322</td>
                        </tr>
                        <tr>
                            <td>餐饮</td>
                            <td>麻辣烫</td>
                            <td>7888</td>
                            <td>15776</td>
                        </tr>
                        <tr>
                            <td>餐饮</td>
                            <td>OCO烤鱼</td>
                            <td>7888</td>
                            <td>215776</td>
                        </tr>
                        <tr>
                            <td>餐饮</td>
                            <td>COCO烤鱼</td>
                            <td>7888</td>
                            <td>215776</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="flex">
                <div class="bg-1 flex1 mgr-8">
                    <div class="content-title">
                        旅游支付方式汇总
                        <button>导出</button>
                    </div>
                    <div class="bg-main-1" class="content-main ">
                        <table border="1">
                            <thead>
                            <tr>
                                <th>支付方式</th>
                                <th>支付数量</th>
                                <th>交易金额(元)</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>微信支付</td>
                                <td>45464</td>
                                <td>21245567</td>
                            </tr>
                            <tr>
                                <td>支付宝</td>
                                <td>345</td>
                                <td>34500</td>
                            </tr>
                            <tr>
                                <td>网上银行</td>
                                <td>345</td>
                                <td>34500</td>
                            </tr>
                            <tr>
                                <td>旅游网站金额产品/礼品卡</td>
                                <td>5678</td>
                                <td>2345673</td>
                            </tr>
                            <tr>
                                <td >其他</td>
                                <td>5454</td>
                                <td>3333322</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="bg-1 flex1 mgl-8">
                    <div class="content-title">
                        景区额外消费项目汇总
                        <button>导出</button>
                    </div>
                    <div class="bg-main-1" class="content-main ">
                        <table border="1">
                            <thead>
                            <tr>
                                <th>消费项目</th>
                                <th>企业名称</th>
                                <th>交易金额(元)</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>餐饮类</td>
                                <td>2567</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>购物类</td>
                                <td>345</td>
                                <td>34500</td>
                            </tr>
                            <tr>
                                <td>景区小交通</td>
                                <td>345</td>
                                <td>34500</td>
                            </tr>
                            <tr>
                                <td>休闲娱乐</td>
                                <td>5678</td>
                                <td>2345673</td>
                            </tr>
                            <tr>
                                <td>导游/导览服务</td>
                                <td>5454</td>
                                <td>3333322</td>
                            </tr>
                            <tr>
                                <td>儿童服务</td>
                                <td>7888</td>
                                <td>15776</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./assets/plugin/jquery.min.js"></script>
<script src="./assets/plugin/ECharts/echarts.js"></script>
<script src="./assets/plugin/ECharts/china.js"></script>
<script src="./assets/plugin/laydate/laydate.js"></script>
<script src="./assets/js/public.js"></script>
<script>
    $(function() {
        laydate.render({
            elem: '#period', //指定元素
            range: true,
            theme: '#37B866',
            min: -30,
            max: 0
        });
        function myChart1_1(val) {
            var myChart = echarts.init(document.getElementById('index_1'));
            let dateData =[],data=[]
            val.map(item=>{
                data.push(item.data)
                dateData.push(item.date)
            })
            option = {
                grid: {
                    top: '20px',
                    left: '20px',
                    bottom: "35px",
                    right: "16px"
                },
                legend: {
                    show:true,
                    right:'20',
                    icon: 'stack',
                    itemWidth:10,
                    itemHeight:10,
                    textStyle:{
                        color:'#fff'
                    },
                },
                tooltip: {
                    show: true,
                    trigger:'axis'
                },
                xAxis: {
                    type: 'category',
                    data: dateData,
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(46,166,255,.5)"
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    // max: 100000,
                    axisLabel: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                },
                series: [{
                    data,
                    type: 'line',
                    symbolSize: 2, // 控制线条上 点 的大小
                    lineStyle: {
                        color: '#fe5959'
                    },
                    areaStyle: { //区域填充样式
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(244,86,84,.6)'
                            },
                                {
                                    offset: 1,
                                    color: 'rgba(244,86,84,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(244,86,84,.6)', //阴影颜色
                            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                }]
            };

            myChart.setOption(option);
        }
        var OperationalData = [{date:'12-02',data:23},{date:'12-03',data:25},{date:'12-04',data:33},{date:'12-05',data:25}]
        myChart1_1(OperationalData)
    })

</script>

</html>
